<template>
	<div>
		<el-tree
			style="max-width: 600px"
			:data="list"
			show-checkbox
			node-key="roleId"
			:default-checked-keys="authorityIds"
			:props="defaultProps"
			:check-strictly="true"
			ref="treeRef"
		/>
		<el-button @click="onEdit" type="primary">确认修改</el-button>
	</div>
</template>

<script lang="ts">
import {
	defineComponent,
	toRefs,
	ref,
	computed,
	reactive,
	watch,
	onMounted,
} from 'vue'
import { useRoute } from 'vue-router'
import { InitData } from '../type/authority'

export default defineComponent({
	name: 'AuthorityView',
	setup() {
		const route = useRoute()
		console.log('route.query.authority-->', route.query.authority)

		const queryData: any = {
			roleId: route.query.roleId,
			authority: route.query.authority,
			// ? route.query.authority.split(',')
			// : [],
		}

		const data = reactive(
			new InitData(queryData.roleId, queryData.authority)
		)

		const defaultProps = {
			children: 'roleList',
			label: 'name',
		}

		const treeData = reactive([
			{
				name: '订单列表',
				roleId: 1,
				viewRole: '',
				roleList: [
					{
						name: '订单详情',
						roleId: 4,
						viewRole: '',
					},
					{
						name: '查看',
						roleId: 2,
						viewRole: '',
					},
					{
						name: '删除',
						roleId: 3,
						viewRole: '',
					},
				],
			},
			{
				name: '商品列表',
				roleId: 5,
				viewRole: '',
				roleList: [
					{
						name: '商品详情',
						roleId: 6,
						viewRole: '',
					},
					{
						name: '查看',
						roleId: 7,
						viewRole: '',
					},
					{
						name: '删除',
						roleId: 8,
						viewRole: '',
					},
				],
			},
			{
				name: '用户列表',
				roleId: 9,
				viewRole: '',
				roleList: [
					{
						name: '用户详情',
						roleId: 10,
						viewRole: '',
					},
					{
						name: '查看',
						roleId: 11,
						viewRole: '',
					},
					{
						name: '删除',
						roleId: 12,
						viewRole: '',
					},
				],
			},
			{
				name: '角色管理',
				roleId: 13,
				viewRole: '',
				roleList: [
					{
						name: '角色详情',
						roleId: 14,
						viewRole: '',
					},
					{
						name: '查看',
						roleId: 15,
						viewRole: '',
					},
					{
						name: '删除',
						roleId: 16,
						viewRole: '',
					},
				],
			},
		])

		data.list = treeData

		const onEdit = () => {
			console.log('treeRef-->', data.treeRef.getCheckedKeys())
		}

		return { ...toRefs(data), defaultProps, onEdit }
	},
})
</script>

<style scoped></style>
